<template>
  <div class="html-container">
    <iframe
      v-if="fileUrl"
      :src="fileUrl"
      class="html-viewer"
      frameborder="0"
      sandbox="allow-same-origin allow-scripts"
      allowfullscreen
    ></iframe>
  </div>
</template>

<script setup>
defineProps({
  fileUrl: {
    type: String,
    required: true
  }
});
</script>

<style scoped>
.html-container {
  height: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  background-color: #f0f0f0;
}

.html-viewer {
  width: 100%;
  height: 100%;
  border: none;
}

@media (max-width: 768px) {
  .html-container {
    min-height: 70vh;
  }
}
</style> 